<template>
	<div class="bank-main">
		<div class="bank-info" v-if="isView">
			<h2>新增银行卡</h2>
			<van-form>
				<van-field v-model="from.username" maxlength="10" type="text" label="持卡人" placeholder="请输入持卡人姓名" />
				<van-field v-model="from.idcard" type="digit" maxlength="18" label="身份证号" placeholder="请输入身份证号码" />
				<van-field v-model="from.bankId" type="text" label="银行卡号" placeholder="请输入银行卡号" />
				<van-field v-model="from.bankName" maxlength="10" label="开户行" placeholder="请输入开户行名称" />
				<van-field v-model="from.bankAddres" maxlength="20" label="开户支行" placeholder="请输入所属支行名称" />
				<van-field class="bank-int" type="digit" maxlength="11" v-model="from.moblie" label="预留手机号" placeholder="请输入预留手机号码" />
			</van-form>
			<div class="bank-btn">
				<a @click="save"><van-btn text="保存" type="1" /></a>
			</div>
		</div>
		<div class="bank-box" v-else>
			<div class="bank-bgs">
				<h3>{{ listArr.bankName }}</h3>
				<p>{{ viewCard(listArr.bankNumber) }}</p>
			</div>
			<div class="bank-site">
				<ul>
					<li>
						<span>持卡人</span>
						<em>{{ listArr.realName }}</em>
					</li>
					<li>
						<span>开户支行</span>
						<em>{{ listArr.branch }}</em>
					</li>
					<li>
						<span>预留手机号</span>
						<em>{{ viewMoblie(listArr.reservedMobile) }}</em>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
import { getBindBankcard, getBankInfo } from '@/api/';
import vanBtn from '../../common/vanBtn';
export default {
	components: {
		vanBtn
	},
	data() {
		return {
			isView: false,
			from: {
				username: '',
				idcard: '',
				bankId: '',
				bankName: '',
				bankAddres: '',
				moblie: ''
			},
			listArr: ''
		};
	},
	watch: {
		['from.bankId'](val) {
			this.$nextTick(() => {
				if(this.from.bankId.length > 19) {
					this.from.bankId = this.from.bankId.substring(0, 19)
					return
				}
				this.from.bankId = val.replace(/\D/g, '').replace(/....(?!$)/g, '$& ');
			});
		}
	},
	mounted() {
		this.init();
	},
	methods: {
		viewMoblie(t){
			if(!t) return '-'
			return t.substring(0, 3) + '****' + t.substring(t.length - 4, t.length)
		},
		init() {
			this.$toast.loading({
			  message: "正在获取银行卡...",
			  forbidClick: true,
			  duration: 0,
			  loadingType: "spinner"
			});
			getBankInfo({})
				.then(res => {
					if (res.code === 200 && res.data.length) {
						this.listArr = res.data[0];
						this.isView = false;
					} else {
						this.isView = true;
					}
					this.$toast.clear()
				})
				.catch(msg => {
					this.$toast.clear()
				});
		},
		async save() {
			const resCheck = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/;
			const strBin = '10,18,30,35,37,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,58,60,62,65,68,69,84,87,88,94,95,98,99';
			if (!this.from.username) {
				this.$notify({ type: 'warning', message: '请输入持卡人姓名' });
				return;
			}

			//身份证验证
			if (!this.from.idcard) {
				this.$notify({ type: 'warning', message: '请输入身份证号码' });
				return;
			} else if (!resCheck.test(this.from.idcard)) {
				this.$notify({ type: 'warning', message: '证件号码格式有误' });
				return;
			}

			//银行卡验证
			if (!this.from.bankId) {
				this.$notify({ type: 'warning', message: '请输入银行卡号' });
				return;
			} else if (this.from.bankId.length < 16 || this.from.bankId.length < 19) {
				this.$notify({ type: 'warning', message: '银行卡号长度必须在16到19之间' });
				return;
			} else if (strBin.indexOf(this.from.bankId.substring(0, 2)) == -1) {
				this.$notify({ type: 'warning', message: '银行卡号开头6位不符合规范' });
				return;
			}

			if (!this.from.bankName) {
				this.$notify({ type: 'warning', message: '请输入开户行名称' });
				return;
			}

			if (!this.from.bankAddres) {
				this.$notify({ type: 'warning', message: '请输入所属支行名称' });
				return;
			}

			//手机号验证
			if (!this.from.moblie) {
				this.$notify({ type: 'warning', message: '请输入手机号码' });
				return;
			} else if (this.from.moblie.length !== 11 || !/^1[0-9]{10}$/.test(this.from.moblie)) {
				this.$notify({ type: 'warning', message: '手机号码不正确' });
				return;
			}
			this.$toast.loading({
			  message: "数据提交中...",
			  forbidClick: true,
			  duration: 0,
			  loadingType: "spinner"
			});
			const res = await this.saveInfo({
				realName: this.from.username,
				certId: this.from.idcard,
				reservedMobile: this.from.moblie,
				bankName: this.from.bankName,
				bankNumber: this.from.bankId.replace(/\s+/g, ""),
				branch: this.from.bankAddres
			});
			this.$toast.clear()
			if (res.code === 200) {
				this.$toast({
					message: '绑卡成功',
					position: 'bottom'
				});
				this.init()
				//提现入口
				debugger
				if(this.$route.query.mayWithdrawAmt){
					this.$router.go(-1)
				}
			} else {
				this.$notify({ type: 'warning', message: res.msg || '绑定银行卡失败' });
			}
		},
		saveInfo(row) {
			return new Promise((resolve, reject) => {
				getBindBankcard(row)
					.then(res => {
						resolve(res);
					})
					.catch(msg => {
						resolve(false);
					});
			});
		},
		viewCard(t) {
			if (!t) return '';
			return '**** **** **** ' + t.substring(t.length - 4, t.length)
		}
	}
};
</script>

<style lang="less" scoped>
.bank-main {
	height: 100vh;
	background: #363D45;
	padding: 1% 0;
	box-sizing: border-box;
	.bank-info {
		background: #fff;
		border-radius: 20px;
		margin: 4% 4%;
		position: relative;
		&:before {
			content: '';
			position: absolute;
			top: 120px;
			left: -20px;
			height: 40px;
			width: 40px;
			border-radius: 50%;
			background: #363D45;
			z-index: 999;
		}
		&:after {
			content: '';
			position: absolute;
			top: 120px;
			right: -20px;
			height: 40px;
			width: 40px;
			border-radius: 50%;
			background: #363D45;
			z-index: 999;
		}
		> h2 {
			padding: 6% 0;
			text-align: center;
			font-size: 44px;
			font-weight: 500;
			position: relative;
			&:before {
				content: '';
				position: absolute;
				bottom: 4px;
				left: 50px;
				right: 50px;
				border-bottom: 3px dashed #e5e5e5;
			}
		}
		.bank-btn {
			margin-top: 5%;
			padding: 3% 8%;
			> a {
				display: block;
				margin-bottom: 8%;
			}
		}
	}
	.bank-box {
		padding: 3% 4%;
		.bank-bgs{
			position: relative;
			max-width: calc(100%);
			height: calc(500px);
			background: url(../../../assets/images/icon-bank.png) no-repeat;
			background-size: 100%;
			z-index: 10;
			box-sizing: border-box;
			padding: 50px 70px;
			>h3{
				color: #fff;
				font-weight: 500;
				font-size: 36px;
				padding-top: 160px;
				padding-bottom: 30px;
				letter-spacing: 6px;
			}
			>p{
				color: #fff;
				font-weight: 500;
				font-size: 40px;
			}
		}
		.bank-site{
			position: relative;
			z-index: 9;
			width: 86%;
			margin: -200px auto 0 auto;
			background: #fff;
			border-radius: 30px;
			height: 410px;
			>ul{
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				padding: 3% 5%;
				>li{
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-ms-flex-wrap: wrap;
					flex-wrap: wrap;
					padding: 4% 0;
					border-bottom: 2px solid #f0f0f0;
					&:last-child{
						border-bottom: 0 none;
					}
					>span{
						width: 40%;
						font-weight: 500;
						font-size: 28px;
					}
					>em{
						width: 60%;
						text-align: right;
						font-weight: 500;
						font-size: 26px;
					}
				}
			}
		}
	}
}
</style>
<style>
.bank-int {
	border-bottom: 2px solid #eee;
}
.bank-info .van-cell {
	padding: 3.5% 16px;
}
.bank-info .van-cell::after {
	border-bottom: 2px solid #eee;
}
.bank-info .van-field__label {
	font-size: 0.38rem;
	color: #333;
	font-weight: 500;
	text-align: right;
}
.bank-info .van-field__control {
	font-weight: 500;
}
</style>
